<template>
  <div class="row">
    <!-- 菜单 -->
    <div class="col-sm-12 col-md-8">
      <table class="table">
        <thead class="thead-default">
          <tr>
            <th>尺寸</th>
            <th>价格</th>
            <th>加入</th>
          </tr>
        </thead>
        <tbody v-for="item in getMenuItems" :key="item.name">
          <tr>
            <td>
              <strong>{{item.name}}</strong>
            </td>
          </tr>
          <tr v-for="option in item.options" :key="option.size">
            <td>{{option.size}}</td>
            <td>{{option.price}}</td>
            <td>
              <button @click="addToBas(item,option)" class="btn btn-sm btn-outline-success">+</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 购物车车 -->
    <!-- {{baskt}} -->
    <div class="col-md-4 col-sm-12">
      <div v-if="baskt.length > 0">
        <table class="table">
          <thead class="thead-default">
            <tr>
              <th>数量</th>
              <th>品种</th>
              <th>价格</th>
            </tr>
          </thead>
          <tbody v-for="(item,index) in baskt" :key="index">
            <tr>
              <td>
                <button class="btn btn-sm" @click="handelOndecrase(item)">-</button>
                <span>{{item.quantity}}</span>
                <button class="btn btn-sm" @click="handelOnincrase(item)">+</button>
              </td>
              <td>{{item.name}}{{item.size}}</td>
              <td>{{item.price * item.quantity}}</td>
            </tr>
          </tbody>
        </table>
        <p>总价：{{"$" + total}}</p>
        <bntton class="btn btn-success btn-block">提交</bntton>
      </div>
      <div v-else>{{baskText}}</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Menu",
  data() {
    return {
      //getMenuItems: {},
      baskt: [],
      baskText: "购物车是空的"
    };
  },
  computed: {
    getMenuItems() {
      //vuex中获取数据
      //...mapState(["menuItems"])
      //return this.$store.state.menuItems;
      return this.$store.getters.getMenuItems
    },
    total() {
      let totalCost = 0;
      for (let index in this.baskt) {
        let indivi = this.baskt[index];
        totalCost += indivi.quantity * indivi.price;
      }
      return totalCost;
    }
  },
  created() {
    this.fatchData();
  },
  methods: {
    fatchData() {
      // fetch("https://pizza-10aa1.firebaseio.com/menu.json")
      //   .then(res => {
      //     return res.json();
      //   })
      //   .then(data => {
      //     this.getMenuItems = data;
      //   });
      // this.axios.get("menu.json").then(res => {
      //   this.getMenuItems = res.data;
      // });
      //数据存到vuex
      this.axios.get("menu.json").then(res => {
        this.$store.commit("setMenuItems", res.data);
      });
    },
    addToBas(item, option) {
      let basket = {
        name: item.name,
        size: option.size,
        price: option.price,
        quantity: 1
      };
      if (this.baskt.length > 0) {
        //过滤
        let reslut = this.baskt.filter(basket => {
          return basket.name === item.name && basket.price === option.price;
        });
        if (reslut != null && reslut.length > 0) {
          reslut[0].quantity++;
        } else {
          this.baskt.push(basket);
        }
      } else {
        this.baskt.push(basket);
      }
    },
    handelOndecrase(item) {
      item.quantity--;
      if (item.quantity <= 0) {
        this.removeFormBask(item);
      }
    },
    handelOnincrase(item) {
      item.quantity++;
    },
    removeFormBask(item) {
      this.baskt.splice(this.baskt.indexOf(item), 1);
    }
  }
};
</script>

<style  scoped>
</style>
